<template>
	<view>
		<view  class="item--list"  v-for="(item, index) in arrayData"  :key="index">
			<view class="item--title" hover-class="tree__hover-class" @click.stop="handleOpenClose(item, index)">
				<view>{{ item.name }}{{ compoType }}</view>
				<view  v-if="item.list && item.list.length"  class="open__and--close">
					<u-icon :name="item.isOpen ? 'arrow-down' : 'arrow-right'" color="#a7aebd" size="18" style="margin-right: 32upx;"></u-icon>
				</view>
				<view class="item-box-point-button" v-if="item.type == 0" @click="selectNode(item, getParentInfo(item),'sta')">
					<u-button color="#2F80ED" class="custom-style" size="normal" text="开始"></u-button>
				</view>
				<view class="item-box-point-button" v-if="item.type == 1">
					<u-button color="rgb(10, 185, 156)" class="custom-style" size="normal" text="继续" @click="selectNode(item, getParentInfo(item),'ctn')"></u-button>
					<u-button type="error" class="custom-style" size="normal" text="结束" @click="selectNode(item, getParentInfo(item),'end')"></u-button>
				</view>
				<view class="item-box-point-button" v-if="item.amount && compoType === 'disease_dispatch'">
					<u-button color="#2F80ED" class="custom-style" size="normal" text="未派单"
						@click="selectNode(item, getParentInfo(item),'dispatchOrder')"></u-button>
					<view class="num-color">{{ item.amount }}</view>
				</view>
				<view class="item-box-point-button" v-if="item.amount && compoType === 'disease_review'">
					<u-button color="#2F80ED" class="custom-style" size="normal" text="待审核"
						@click="selectNode(item, getParentInfo(item),'dispatchOrder')"></u-button>
					<view class="num-color">{{ item.amount }}</view>
				</view>
				<view class="item-box-point-button" v-if="item.amount && compoType === 'wx'">
					<u-button color="#2F80ED" class="custom-style" size="normal" text="未修复"
						@click="selectNode(item, getParentInfo(item),'dispatchOrder')"></u-button>
					<view class="num-color">{{ item.amount }}</view>
				</view>
				<view class="item-box-point-button" v-if="item.amount && compoType === 'wxsh'">
					<u-button color="#2F80ED" class="custom-style" size="normal" text="待审核"
						@click="selectNode(item, getParentInfo(item),'dispatchOrder')"></u-button>
					<view class="num-color">{{ item.amount }}</view>
				</view>
			</view>
			<view v-if="item.isOpen && item.list && item.list.length">
				<treeItem :arrayData="item.list" :parentInfo="getParentInfo(item)" @change="selectNode" :compoType="compoType"></treeItem>
			</view>
		</view>
	</view>
</template>

<script>
	import treeItem from '../ls-treeNode/ls-treeNode'
	export default {
		name: 'treeItem',
		components: {
			treeItem
		},
		props: {
			arrayData: {
				type: Array,
				default: () => []
			},
			parentInfo: {
				type: Array,
				default: () => []
			},
			compoType: {
				type: String,
				default: 'inspect'
			},
		},
		methods: {
			selectNode(item,parentInfo,type) {
				this.$emit('change', item,parentInfo,type)
			},
			 getParentInfo(item) {
			      // Clone the parentInfo array and push the current item's information
			      return [...this.parentInfo, item];
			},
			handleOpenClose(item, index) {
				if (!item.hasOwnProperty('isOpen')) {
					item.isOpen = false
				}
				item.isOpen = !item.isOpen
				this.$forceUpdate()
			}
		}
	}
</script>

<style scoped lang="scss">
	.item--list {
		padding-left: 25rpx;
	}
	.item--title {
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 28rpx;
		border-bottom: 1rpx solid #f7f7f7;
		padding: 25rpx;
	}
	.open__and--close {
		margin-left: auto;
		font-size: 24rpx;
	}
	.tree__hover-class {
		background-color: #f7f7f7;
	}
.item-box-point-button {
	display: flex;
	align-items: center;
	position: relative;
	.custom-style {
		margin: 5rpx;
		height: 60rpx;
		width: 110rpx;
	}
	.num-color {
		position: absolute;
		font-weight: bold;
		margin-left: 18rpx;
		color: #ffffff;
		height: 40rpx;
		width: 40rpx;
		border-radius: 50%;
		line-height: 40rpx;
		text-align: center;
		background: #fe706c;
		left: 80rpx;
		bottom: 40rpx;
	}
}
</style>